<template>
  <div class="container">
    <h2>API测试页面</h2>
    <div class="card">
      <h3>工序类型API测试</h3>
      <el-button type="primary" @click="testListProcessType">获取工序类型列表</el-button>
      <el-button type="success" @click="testAddProcessType">添加工序类型</el-button>
      <el-button type="warning" @click="testProcessTree">获取工序类型树</el-button>
      
      <div v-if="result" class="result">
        <h4>API响应结果：</h4>
        <pre>{{ JSON.stringify(result, null, 2) }}</pre>
      </div>
      
      <div v-if="error" class="error">
        <h4>错误信息：</h4>
        <pre>{{ error }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
import { listProcessType, getProcessType, delProcessType, addProcessType, updateProcessType, listProcessTypeTree } from "@/api/qep/processType";
import { listProcess, getProcess, delProcess, addProcess, updateProcess } from "@/api/qep/process";
import { ref } from 'vue';

export default {
  name: "ApiTest",
  setup() {
    const result = ref(null);
    const error = ref(null);
    
    const clearResults = () => {
      result.value = null;
      error.value = null;
    };
    
    const testListProcessType = async () => {
      clearResults();
      try {
        const response = await listProcessType({});
        result.value = response;
        console.log("API响应:", response);
      } catch (err) {
        error.value = err.message || JSON.stringify(err);
        console.error("API错误:", err);
      }
    };
    
    const testAddProcessType = async () => {
      clearResults();
      try {
        const testData = {
          name: "测试工序类型" + Date.now(),
          parentId: 0,
          orderNum: 999
        };
        const response = await addProcessType(testData);
        result.value = response;
        console.log("API响应:", response);
      } catch (err) {
        error.value = err.message || JSON.stringify(err);
        console.error("API错误:", err);
      }
    };
    
    const testProcessTree = async () => {
      clearResults();
      try {
        const response = await listProcessTypeTree();
        result.value = response;
        console.log("API响应:", response);
      } catch (err) {
        error.value = err.message || JSON.stringify(err);
        console.error("API错误:", err);
      }
    };
    
    return {
      result,
      error,
      testListProcessType,
      testAddProcessType,
      testProcessTree
    };
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

.result, .error {
  margin-top: 20px;
  padding: 15px;
  border-radius: 5px;
}

.result {
  background-color: #f0f9eb;
}

.error {
  background-color: #fef0f0;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 400px;
  overflow: auto;
}
</style> 